import { Application, Container } from "pixi.js";
import { ChessSet } from "./ChessSet";
import { User } from "../Entity/User";
import { SystemLayer } from "./System/SystemLayer";
import { Cover } from "./System/Cover";
import { LayerManager } from "./System/LayerManager";
import { MoveControl } from "./MoveControl";
import { PixelFile } from "./Data/CanvasFile";
import { Toast } from "vant";
import { UserEvent, UserHub } from "../UserInput/UserListener";
import { useFileStore } from "../../Views/Files/files";
import { debounce, throttle } from "lodash-es";
export class Canvas {
    user: User;
    cover: Cover;
    MoveControl: MoveControl;
    get ticker() {
        return this.app.ticker;
    }
    /**  */
    scaleRate = 2;
    get scale() {
        return this.layerManager.scale.x;
    }
    /** 直接设置它可以改变全局的大小 */
    set scale(num: number) {
        if (num >= 0.1) {
            this.layerManager.scale.set(num, num);
            this.systemLayer.brushShower.scale.set(num, num);
            this.updateStageEdge();
        }
    }

    app: Application;
    container = new Container();

    layerManager: LayerManager;
    systemLayer = new SystemLayer();

    stops: Function[] = [];
    constructor(app: Application, width: number, height: number) {
        this.app = app;
        this.user = new User();

        this.layerManager = new LayerManager(this, height, width);
        this.cover = new Cover(this, width, height).mount(this.layerManager);
        this.MoveControl = new MoveControl(app, this.layerManager);
        const stopScale = UserEvent.bindScale(this);
        this.stops.push(stopScale);
        UserHub.on("save", this.saveFile);
        UserHub.on("moving", this.updateStageEdge);
    }
    destroy() {
        this.stops.forEach((i) => i());
        UserHub.off("save", this.saveFile);
        UserHub.off("scale", this.updateStageEdge);
        UserHub.off("move", this.updateStageEdge);
        this.layerManager.destroy();
        this.MoveControl.destroy();
        this.systemLayer.destroy();

        this.app.destroy(true);
        this.app = null as any;
    }
    /** 更新可视区块，现在被废弃 */
    updateStageEdge = throttle(() => {
        for (let i of this.layerManager.layers.values()) {
            i.reRenderEdge();
        }
    }, 200);
    /** 保存数据到 FileStore */
    saveFile = () => {
        const file = this.layerManager.outputFile();
        const tempFile = JSON.parse(JSON.stringify(file));
        useFileStore().saveFile(tempFile, this.layerManager.outputPreview());
        Toast({
            message: "保存文件成功",
            position: "bottom",
        });
    };

    mount() {
        this.container.sortableChildren = true;

        this.container.addChild(this.systemLayer, this.layerManager);

        this.app.stage.addChild(this.container);
        this.layerManager.centerAll();

        new ChessSet().mount(this.layerManager);
        return this;
    }
    loadFile(file: PixelFile) {
        this.layerManager.loadFile(file);
        Toast({
            message: "打开文件成功",
            position: "bottom",
        });
        return this;
    }
}
